<template>
    <div style="background: #000000;border-radius: 20px; text-align: center;">
      <b-container fluid>
        <b-form-group
          label="云台控制"
          label-for="input-1"
          description=""
        >
          <div class='pie'>
              <div class='slice-one slice'>
                  <button @mousedown="controlPTZ(1,'TILT_UP')" title="向上" @mouseup="controlPTZ(0,'TILT_UP')">
                      <img :src="require('@/assets/images/up.png')" alt="" width="12" height="14">
                  </button>
              </div>
              <div class='slice-two slice'>
                  <button @mousedown="controlPTZ(1,'UP_RIGHT')" title="右上" @mouseup="controlPTZ(0,'UP_RIGHT')">
                      <img :src="require('@/assets/images/up.png')" alt="" width="12" height="14">
                  </button>
              </div>
              <div class='slice-three slice'>
                  <button @mousedown="controlPTZ(1,'PAN_RIGHT')" title="向右" @mouseup="controlPTZ(0,'PAN_RIGHT')">
                      <img :src="require('@/assets/images/up.png')" alt="" width="12" height="14">
                  </button>
              </div>
              <div class='slice-four slice'>
                  <button @mousedown="controlPTZ(1,'DOWN_RIGHT')" title="右下" @mouseup="controlPTZ(0,'DOWN_RIGHT')">
                      <img :src="require('@/assets/images/up.png')" alt="" width="12" height="14">
                  </button>
              </div>
              <div class='slice-five slice'>
                  <button @mousedown="controlPTZ(1,'TILT_DOWN')" title="向下" @mouseup="controlPTZ(0,'TILT_DOWN')">
                      <img :src="require('@/assets/images/up.png')" alt="" width="12" height="14">
                  </button>
              </div>
              <div class='slice-six slice'>
                  <button @mousedown="controlPTZ(1,'DOWN_LEFT')" title="左下" @mouseup="controlPTZ(0,'DOWN_LEFT')">
                      <img :src="require('@/assets/images/up.png')" alt="" width="12" height="14">
                  </button>
              </div>
              <div class='slice-seven slice'>
                  <button @mousedown="controlPTZ(1,'PAN_LEFT')" title="向左" @mouseup="controlPTZ(0,'PAN_LEFT')">
                      <img :src="require('@/assets/images/up.png')" alt="" width="12" height="14">
                  </button>
              </div>
              <div class='slice-eight slice'>
                  <button title="左上" @mousedown="controlPTZ(1,'UP_LEFT')" @mouseup="controlPTZ(0,'UP_LEFT')">
                      <img :src="require('@/assets/images/up.png')" alt="" width="12" height="14">
                  </button>
              </div>
              <button class="center" href="javascript:void(0)" @mousedown="controlPTZ(0,'ZOOM_OUT')" title="停止转动" @mouseup="controlPTZ(0,'ZOOM_OUT')"></button>
            </div>
        </b-form-group>
        <b-form-group
          label="缩放"
          description=""
          label-for="input-1"
        >
          <a style="margin-left: 15px;" href="javascript:void(0)" title="放大" @mousedown="controlPTZ(1,'ZOOM_IN')" @mouseup="controlPTZ(0,'ZOOM_IN')">              
              <i class=" fas fa-search-plus"></i>
          </a>
          <a style="margin-left: 15px" href="javascript:void(0)" title="缩小"  @mousedown="controlPTZ(1,'ZOOM_OUT')" @mouseup="controlPTZ(0,'ZOOM_OUT')">
              <i class=" fas fa-search-minus"></i>
          </a>
        </b-form-group>
        <b-form-group
          label="聚焦"
          label-for="input-1"
          description=""
        >
          <a style="margin-left: 15px" href="javascript:void(0)" title="远焦距">
              <i class="fas fa-expand"></i>
          </a>
          <a style="margin-left: 15px" href="javascript:void(0)" title="近焦距">
              <i class="  fas fa-compress"></i>
          </a>
        </b-form-group>
        <b-form-group
          label="操作"
          label-for="input-1"
          description=""
        >
          <el-select :popper-append-to-body="false" popper-class="speedClass" v-model="speed" placeholder="倍速" style="margin-left: 15px;width: 80px;">
              <el-option v-for="item in speedOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
          </el-select>    
          <a style="margin-left: 15px" @click="transcribeVideo" href="javascript:void(0)" :title="transcribeText">
            <i class=" fas fa-video"></i>
          </a>
          <a style="margin-left: 15px" @click="screenShot" href="javascript:void(0)" title="截图">
            <i class="flaticon2-image-file"></i>
          </a>
          <!-- 
          <a style="margin-left: 15px" id="m" href="javascript:void(0)" title="慢">
              <img :src="require('@/assets/images/m.png')"  alt="">
          </a>
          <a style="margin-left: 15px" id="z" href="javascript:void(0)" title="中">
              <img :src="require('@/assets/images/z.png')" alt="">
          </a>
          <a style="margin-left: 15px" id="k" href="javascript:void(0)" title="快">
              <img :src="require('@/assets/images/k.png')" alt="">
          </a> 
          -->
        </b-form-group>
        <!-- <b-form-group
          label="操作"
          label-for="input-5"
          description=""
        >
          <a style="margin-left: 15px" @click="transcribeVideo" href="javascript:void(0)" :title="transcribeText">
            <i class=" fas fa-video"></i>
          </a>
          <a style="margin-left: 15px" @click="screenShot" href="javascript:void(0)" title="截图">
            <i class="flaticon2-image-file"></i>
          </a>
        </b-form-group> -->
        <!-- <b-form-group
          label="镜像"
          label-for="input-6"
          description=""
        >
          <a style="font-size: 18px;color: #fff;;text-decoration: none;">镜像:</a>
          <a style="margin-left: 15px" id="sx" href="javascript:void(0)" title="上下">
              <img src="/static/img/sx1.png" alt="">
          </a>
          <a style="margin-left: 15px" id="zx" href="javascript:void(0)" title="中心">
              <img src="/static/img/zx1.png" alt="">
          </a>
          <a style="margin-left: 15px" id="zy" href="javascript:void(0)" title="左右">
              <img src="/static/img/zy2.png" alt="">
          </a>
        </b-form-group> -->
      </b-container>
    </div>
  </template>
  
  <script>
  import apiUtil from "@/core/util/apiUtil.js";
  import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
  export default {
    props: {
      device_id: null,
      
    },
    data() {
      return {    
        transcribeText: '录屏',
        speed: "1",
        speedOptions: [
            {
                value: '1',
                label: '倍速1'
            }, {
                value: '2',
                label: '倍速2'
            }, {
                value: '3',
                label: '倍速3'
            }, {
                value: '4',
                label: '倍速4'
            }, {
                value: '5',
                label: '倍速5'
            }
        ],    
        controlForm: { start: null, pztType: null, deviceId: ""},
      }
    },
    methods: {
        controlPTZ(start, pztType) {
            this.controlForm.start = start;
            this.controlForm.pztType = pztType;
            this.controlForm.deviceId = this.deviceId;
            apiUtil.post(process.env.VUE_APP_MONITOR_API + "/ptz/control", this.controlForm).then(({ data }) => {
                if (data.success) {
                } else {
                    handleAlert("操作失败", "error", 3);
                }
            });
        },
        screenShot() {//截图
            apiUtil.get(process.env.VUE_APP_MONITOR_API + "/screenShot/" + this.deviceId).then(({ data }) => {
                handleAlert("操作成功", "success", 3);
            });
        },
        transcribeVideo() {//录屏
            apiUtil.get(process.env.VUE_APP_MONITOR_API + "/iotDevice/get/" + this.deviceId).then(({ data }) => {
                let transcribe = data.data.transcribe;
                if (transcribe == 0 || transcribe == null || transcribe == '') {//当前状态为停止 则可开启录制
                    this.$confirm("确定录制视频?", "提示", { type: "warning", }).then(() => {
                        apiUtil.get(process.env.VUE_APP_MONITOR_API + "/transcribe/" + this.deviceId).then(({ data }) => {
                            if (data.data.success) {
                                this.transcribeText = '停止录制'
                                handleAlert("录制成功", "success", 3);
                            } else {
                                handleAlert("录制失败", "error", 3);
                            }
                        });
                    }).catch(() => { });//注意这里，这里是重点！！！;        
                }
                if (transcribe == 1) {
                    this.$confirm("确定暂停录制视频?", "提示", { type: "warning", }).then(() => {
                        apiUtil.get(process.env.VUE_APP_MONITOR_API + "/transcribe/" + this.deviceId).then(({ data }) => {
                            if (data.data.success) {
                                this.transcribeText = '录屏'
                                handleAlert("停止录制成功", "success", 3);
                            } else {
                                handleAlert("停止录制失败", "error", 3);
                            }
                        });
                    }).catch(() => { });//注意这里，这里是重点！！！;      
                }
            });
        },
    },
  }
  </script>
  
<style scoped>
.pie {
    position: relative;
    margin: 0px auto;
    padding: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    list-style: none;
    /* background: url('~@/assets/images/background.png') no-repeat center center / 80% 80%; */
    background: #303133 no-repeat center center / 80% 80%;
}

.center {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 25px;
    left: 25px;
    border-radius: 50%;
    background: url('~@/assets/images/sx.png') no-repeat center center / 60% 60%;

}
.slice {
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 50%;
    transform-origin: 0% 100%;
}

.slice-one {
    transform: rotate(329deg) skewY(-45deg);
}

.slice-one img {
    transform: skewY(45deg) rotate(31deg);
    margin-top: 30px;
    /* margin-left: 17px; */
}

.slice-two {
    transform: rotate(18deg) skewY(-45deg);

}

.slice-two img {
    transform: skewY(45deg) rotate(32deg);
    margin-top: 30px;
    /* margin-left: 17px; */
}

.slice-three {
    transform: rotate(63deg) skewY(-45deg);

}

.slice-three img {
    transform: skewY(45deg) rotate(27deg);
    margin-top: 30px;
    /* margin-left: 17px; */
}

.slice-four {
    transform: rotate(104deg) skewY(-45deg);

}

.slice-four img {
    transform: skewY(45deg) rotate(31deg);
    margin-top: 30px;
    /* margin-left: 17px; */
}

.slice-five {
    transform: rotate(148deg) skewY(-45deg);

}

.slice-five img {
    transform: skewY(45deg) rotate(33deg);
    margin-top: 30px;
    /* margin-left: 17px; */
}

.slice-six {
    transform: rotate(192deg) skewY(-45deg);

}

.slice-six img {
    transform: skewY(45deg) rotate(33deg);
    margin-top: 30px;
    /* margin-left: 17px; */
}

.slice-seven {
    transform: rotate(236deg) skewY(-45deg);

}

.slice-seven img {
    transform: skewY(45deg) rotate(34deg);
    margin-top: 30px;
    /* margin-left: 17px; */
}

.slice-eight {
    transform: rotate(280deg) skewY(-45deg);

}

.slice-eight img {
    transform: skewY(45deg) rotate(32deg);
    margin-top: 30px;
}

/deep/.el-input__inner {
    background-color: #000000 !important;
    border: 0px solid #DCDFE6 !important;
    color: #606266;
    width:100px;
}
/deep/.el-select .el-input .el-select__caret {
    color: #181C32 !important;
}

/deep/ .el-select-dropdown{
    background-color: transparent;
    border: 0px solid #E4E7ED !important;
}
</style>  
<style>
.speedClass .el-select-dropdown__list{
  border: 0px solid #E4E7ED !important;
  background-color: #000000 !important;
}
.speedClass .el-select-dropdown{
  border: 0px solid #E4E7ED !important;
}
</style>